<template>
    <div class="order_catchpdd">

        <div class="team">
            <div class="powertop">
                <router-link class="powertopli" to="/order_catchlinshi/order_catchjd">京东抓单</router-link>
                <router-link class="powertopli powertopact" to="/order_catchlinshi/order_catchpdd">拼多多抓单</router-link>
              <router-link class="powertopli" to="/order_catchlinshi/order_catchyz">有赞抓单</router-link>
                <router-link class="powertopli" to="/order_catchlinshi/order_catchtm">天猫抓单</router-link>
            </div>
            <div class="centerall">
                <div class="t-img">
                    <img src="../../../static/img/catchyz.png">
                    <!-- <span class="t-48" @click="mlog48 = true">48小时自动发货</span> -->
                    <span class="t-email" @click="mobileshow">设置短信报警</span>
                </div>
                <div style="display: flex; margin-bottom: 20px;">
                  <div style="border-bottom: 3px #ff0000 solid; width: 100px; cursor: pointer; font-size: 16px; margin-right: 20px; padding: 20px 0; text-align: center;">旧版抓单</div>
                  <div @click="goxin" style="border-bottom: 3px #FFFFFF solid; width: 180px; cursor: pointer;  font-size: 16px; padding: 20px 0; text-align: center;">新版抓单（自研应用）</div>
                </div>
                <div class="t-con" v-loading="loading">
                	<div class="list" style="margin-bottom: 10px; border-left: 1px #EAEAEA solid;">
                		<div class="th">店铺名称</div>
                		<div class="th">cookie状态</div>
                	    <div class="th">操作</div>
                	</div>
                	<div class="list" v-for="item in list" :key="item.id" style=" border-left: 1px #EAEAEA solid;">
                		<div class="td td2">{{item.shop_name}}</div>
                	    <div class="td td2">
                          {{item.stat}}
                          <div class="cookiechange" @click="showlog(item.id)"><i class="el-icon-edit" style="color: #409eff;"></i></div>

                          <!-- <div class="cookiechange" v-if="shopid == 50481 || shopid == 304676" @click="showlog2(item.id)" style="margin-left: 20px;">订单解密<i class="el-icon-edit" style="color: #409eff;"></i></div> -->
                      </div>
                	    <div class="td td2">
                	        <!-- <el-button type="primary" size="mini" v-if="item.is_run == 0 && item.is_login != 2" @click="showlog(item.id)">开始抓单</el-button>

                	        <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="showlog(item.id)">抓单中</el-button>
                	        <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="stop(item.id)">暂停抓单</el-button>

                          <span style="margin-right: 10px;" v-if="item.cookie != '' && item.is_run == 0 && item.is_login == 2">抓单已暂停</span>
                          <el-button type="primary" size="mini" v-if="item.cookie != ''  && item.is_run == 0 && item.is_login == 2" plain @click="showlog(item.id)">继续抓单</el-button>
                          <el-button type="primary" size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button> -->
                          <span style="margin-right: 10px;" v-if="item.is_run == 1 && item.is_login == 1">抓单已开启</span>
                          <el-button v-if="item.is_run == 0 && item.is_login != 1" type="primary" size="mini" @click="gocatch(item.id)">开启抓单</el-button>
                          <!-- <el-button v-if="item.is_run == 1 && item.is_login == 1" type="danger" size="mini" @click="stop(item.id)">停止抓单</el-button> -->
                          <el-button type="primary" plain size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button>
                          <el-button type="text" size="mini" @click="seelogs(item.id,item.shop_name)">查看抓单失败记录</el-button>
						  <el-button type="danger" plain size="mini" @click="shanchu(item.id)">删除</el-button>
                      </div>
                	</div>
                    <div class="addshop"><el-button type="primary" size="mini" @click="addshplog = true"><i class="el-icon-plus"></i>申请添加店铺</el-button></div>
                	<div class="getcookie">
                    <div style="color: #ff253f;">cookie说明：cookie只影响备注同步，不影响抓单和发货，请保持可用状态</div>
                        <h3>拼多多添加店铺抓单流程:</h3>
<!--                        <div>1、登录拼多多店铺商家后台</div>
                        <div>3、按下F12（或者在设置菜单）中进入开发者模式，点击右上角开发者模式的“network”（部分浏览器在底部显示）。</div>
                        <div>3、按下F5刷新页面在右侧的name框中选择第一个文件，在右侧的headers中找到cookie。</div>
                        <div v-if="!hide"><el-button @click="hide = true" type="primary" size="mini">展开查看详细教程<i class="el-icon-caret-bottom"></i></el-button></div>
                        <div v-if="hide"><el-button @click="hide = false" type="primary" size="mini">展开查看详细教程<i class="el-icon-caret-top"></i></el-button></div>
                        <div v-if="hide">
                            <div><img src="../../../static/img/pdd1.png" /></div>
                            <div>4、粘贴内容到cookie框</div>
                        </div> -->
                        <div class="getflex">

                            <div class="getflexli">
                              <div class="getflexlix">1</div>
                            </div>
                            <div class="getxian"></div>
                            <div class="getflexli">
                              <div class="getflexlix">2</div>
                            </div>
                            <div class="getxian"></div>
                            <div class="getflexli">
                              <div class="getflexlix">3</div>
                            </div>
                        </div>
                        <div class="getflex2">
                            <div class="getflexli2">
                                <div class="getflexli2title">服务市场授权万里牛</div>
                                <!-- <div class="getflexli2content blue"><router-link  to="/order_catch/order_catchpddsq">点击进入详细步骤操作</router-link></div> -->
                            </div>
                            <div class="getflexli2">
                                <div class="getflexli2title">添加店铺</div>
                                <div class="getflexli2content">点击上方的“申请添加店铺”按钮</div>
                                <div class="getflexli2content">填写店铺名称和店铺ID</div>
                            </div>
                            <div class="getflexli2">
                                <div class="getflexli2title">开始抓单</div>
                                <div class="getflexli2content">添加店铺后点击开始抓单</div>
                                <div class="getflexli2content">在弹出的窗口输入cookie信息即可抓单</div>
                                <!-- <div class="getflexli2content blue"><router-link  to="/order_catch/order_catchpddcook">点击了解如何获取cookie</router-link></div> -->
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <el-dialog title="cookie登录" :visible.sync="log" :close-on-click-modal="false" width="600px">
            <div>
                <el-input type="textarea" placeholder="请输入cookie" v-model="cookies" rows="15"></el-input>
                  <!-- :picker-options="timerule" -->

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="log = false">取 消</el-button>
                <el-button type="primary" @click="gocookie">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="解密录入" :visible.sync="log2" :close-on-click-modal="false" width="600px">
            <div>
                <el-input type="textarea" placeholder="请输入cookies" v-model="cookies2" rows="8" style="margin-bottom: 20px;"></el-input>
                <el-input type="textarea" placeholder="请输入anti-content" v-model="cookies3" rows="8"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="log2 = false">取 消</el-button>
                <el-button type="primary" @click="gocookie2">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="手机号设置" :visible.sync="mlog" :close-on-click-modal="false" width="600px">
            <div>
                <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="mlog = false">取 消</el-button>
                <el-button type="primary" @click="gomobile">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="48小时自动发货" :visible.sync="mlog48" :close-on-click-modal="false" width="600px">
            <div style="text-align:center;">
                <el-radio v-model="radio" label="1">开启</el-radio>
                <el-radio v-model="radio" label="0">关闭</el-radio>
            </div>
            <div class="says48">
                <div>说明：开启该功能后拼多多订单会在要求的48小时之前的8个小时，在拼多多平台以无需物流的方式自动发货，在您导入正常发货的运单号数据后，
                    系统会前往拼多多覆盖原发货信息（自发货后的24小时内可覆盖）。</div>
                <div style="color:#f00">注：该功能仅支持抓单的数据发货，未设置抓单或未登陆，功能无效</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="mlog48 = false">取 消</el-button>
                <el-button type="primary" @click="go48">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="申请添加店铺" :visible.sync="addshplog" :close-on-click-modal="false" width="600px">
            <div style="margin-bottom: 20px;">
                <el-input v-model="addshopname" placeholder="请输入店铺名"></el-input>
            </div>

<!--            <div>
                <el-input v-model="addshoptoken" placeholder="请输入AccssToken"></el-input>
            </div> -->
            <div style="margin-top:20px; color:#999;">
              注：成功提交后我们将在工作日内48小时配置好，届时可操作抓单。
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addshaopf">提交申请</el-button>
            </span>
        </el-dialog>
        <el-dialog title="漏单补抓" :visible.sync="loudanlog" :close-on-click-modal="false" @close="clearText" width="600px">
          <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="指定单号补抓" name="first">
                <div style="color: #ff253f;">注：请直接从EXCEL复制粘贴，一行一个单号。</div>
                <el-input type="textarea" :rows="10" placeholder="请直接从EXCEL复制粘贴，一行一个单号。" v-model="loudannum" ></el-input>
            </el-tab-pane>
            <el-tab-pane label="指定时间段补抓" name="second">
              <div style="margin-top: 20px;">抓单开始时间：<el-date-picker v-model="time" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker></div>
            </el-tab-pane>
          </el-tabs>
          <div style="margin-top: 20px;">提醒：重新补抓会消耗您店铺的订单解密额度，请确保解密额度充足。<a href="https://fuwu.pinduoduo.com/service-market/decrypt" target="_blank">查看解密额度</a></div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="loudanlog = false">取 消</el-button>
              <el-button type="primary" @click="loudan">确 定</el-button>
          </span>
        </el-dialog>
    </div>

</template>

<script>
    import axios from 'axios'
    export default{
    	name : "order_catchpdd",
    	data(){
    		return {
                loudanlog:false,
                loudannum:"",
                chooseid:"",
                loading:true,
                list:"",
                hide:false,
                log:false,
                cookies:"",
                cookies2:"",
                cookies3:"",
                mobile:"",
                mlog:false,
                addshplog:false,
                addshopname:"",
                addshoptoken:"",
                id:"",
                time:"",
                // timerule:{
                //     disabledDate(time) {
                //         var time1 = Date.now() - 3600 * 1000 * 24 * 4
                //         return time.getTime() < time1
                //     },
                // },
                radio:"0",
                mlog48:false,
                log2:false,
                shopid:"",
                activeName:"first",
                pickerOptions: {
                  disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;
                  }
                }
    		}
    	},
    	created() {
        // this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
           this.getlist();
    	},
    	mounted(){

    	},
    	methods: {
			shanchu: function(id) {
				
				this.$confirm('删除店铺会使已有订单失去订单来源，请慎重删除', '重要', {
				          confirmButtonText: '确定删除',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.loading = true
				          axios.post('/api/plan-market/out-store/delete', {
				          		id: id
				          	})
				          	.then(response => {
				          		if (response.data.msg.code == 0) {
				          			this.getlist()
				          		} else {
				          			this.$message.error(response.data.msg.info);
				          		}
				          	})
				        })
						
			},
        goxin:function(){
          this.$router.push({
            path: "/order_catchlinshi/order_catchpdd2"
          });
        },
        clearText(){
          this.loudannum = ''
        },
        //开启抓单
        gocatch(id){
          this.id = id
          axios.post('/api/plan-market/out-store/updaterun',{id:this.id})
          	.then(response => {
          		if(response.data.msg.code == 0){
          			this.loading = true
                this.getlist()
          		}else{
          			this.$message.error(response.data.msg.info);
          		}
          	})
        },
        // seelogs(id){
        //   this.$router.push({
        //     path: "/order_catch/order_catchpddlogs",
        //     query: { id: id }
        //   });
        // },
        seelogs(id,name){
          this.$router.push({
            path: "/order_catchlinshi/order_catchpddlogs",
            query: { id: id,name:encodeURIComponent(name) }
          });
        },
            loudanchoose:function(e){
              this.chooseid = e
              this.loudanlog = true
            },
            loudan:function(){
              var that = this

              //   var list = [this.loudannum]
              //   if(this.loudannum.indexOf('，') > -1){
              //       list = this.loudannum.split('，')
              //   }
              //   if(this.loudannum.indexOf(',') > -1){
              //       list = this.loudannum.split(',')
              //   }

                let duoxuanids2
                duoxuanids2 = this.loudannum.split(/\n/)
                for(let i in this.duoxuanids2){
                  duoxuanids2[i] = duoxuanids2[i].trim()
                }
                let data = {}
                data.id = this.chooseid
                if(this.activeName == 'first'){
                  data.orders = duoxuanids2
                  data.tag = 1
                }else{
                  data.start_time  = this.time[0]
                  data.end_time  = this.time[1]
                  data.tag = 2
                }

                axios.post('/api/plan-market/out-store/order/refetch',data)
                  .then(response => {
                    if(response.data.msg.code == 0){
                        that.$message({
                          message: '抓单已提交，请稍后查看。',
                          type: 'success'
                        });
                        that.clearText()
                        that.loudanlog = false
                    }else{
                        that.$message.error(response.data.msg.info);
                    }
                  })
            },
            //申请店铺
            addshaopf:function(){
              this.addshopname = this.addshopname.trim()
              this.addshoptoken = this.addshoptoken.trim()
              // if(!this.addshopname || !this.addshoptoken){
              //   this.$message.error('请填写店铺名和AccssToken')
              //   return
              // }
              var that = this
                    axios.post('/api/plan-market/out-store/add',{name:this.addshopname,source:"pdd",access_token:this.addshoptoken})
                      .then(response => {
                        if(response.data.msg.code == 0){
                          that.$message({
                                    message: '申请已发送，我们将在48小时内处理。',
                                    type: 'success'
                                  });
                    that.addshplog = false
                    that.addshopname = ""
                        }else{
                          that.$message.error(response.data.msg.info);
                        }
                      })
            },
            //48小时发货确认
            go48:function(){
                var that = this
                axios.post('/api/plan-market/out-store/auto_deliver',{auto_deliver:that.radio})
                	.then(response => {
                		if(response.data.msg.code == 0){

                            if(that.radio == '0'){
                                that.$message({
                                message: '自动发货关闭！',
                                type: 'success'
                			    });
                            }else{
                                that.$message({
                                message: '自动发货开启！',
                                type: 'success'
                			    });
                            }
                            that.mlog48 = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //获取手机号
            mobileshow:function(){
                var that = this
                axios.get('/api/plan-market/out-store/one?id='+this.mobileid)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.mobile = response.data.data.mobile
                            that.mlog = true
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //停止抓单
            stop:function(id){
                var that = this
                axios.post('/api/plan-market/out-store/stop/fetch',{id:id})
                	.then(response => {
                		if(response.data.msg.code == 0){
                			that.$message.success('已停止抓单！');
                            that.loading = true
                            that.getlist()
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            //点击登录和重复登录
            showlog:function(id){
                this.id = id
                this.log = true
                var that = this
                axios.get('/api/plan-market/out-store/one?id='+id)
                	.then(response => {
                		if(response.data.msg.code == 0){
                      that.cookies = response.data.data.cookie
                			that.time = [response.data.data.fetch_start_at,response.data.data.fetch_end_at]
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
            showlog2:function(id){
                this.id = id
                this.log2 = true
            },

            //设置手机号
            gomobile:function(){
                var that = this
                axios.post('/api/plan-market/out-store/update',{source:'pdd',mobile:this.mobile})
                	.then(response => {
                		if(response.data.msg.code == 0){
                			that.$message({
                			  message: '手机号设置成功',
                			  type: 'success'
                			});
                            that.mlog = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },

            //cookie登录
            gocookie:function(){
              this.cookies = this.cookies.trim()
                if(this.cookies == ""){
                    this.$message('请填写cookie！');
                    return false
                }
                // if(this.time == "" || this.time == undefined){
                //     this.$message('请选择抓单时间！');
                //     return false
                // }
                var that = this
                axios.post('/api/plan-market/out-store/update',{id:this.id,cookie:this.cookies})
                	.then(response => {
                		if(response.data.msg.code == 0){
                			that.loading = true
                			that.log = false
                            that.getlist()
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})

            },
            gocookie2:function(){
              var that = this
              axios.post('/api/plan-market/out-store/update',{id:this.id,apply_cookie:this.cookies2,apply_anti:this.cookies3})
              	.then(response => {
              		if(response.data.msg.code == 0){
              			that.loading = true
              			that.log2 = false
                    that.getlist()
              		}else{
              			that.$message.error(response.data.msg.info);
              		}
              	})
            },
            //获取号码
            getlist:function(){
                var that = this
                axios.get('/api/gth/out-store/list?source=pdd')
                	.then(response => {
                        if(response.data.msg.code == 0){
							if(response.data.data != ''){
								for( var i in response.data.data){
									if(response.data.data[i].is_cookie === 0){
									  response.data.data[i].stat = "不可用，请重新录入";
									}
									if(response.data.data[i].is_cookie === 1){
									  response.data.data[i].stat = "可用";
									}
								}
								that.list = response.data.data
								that.mobileid = response.data.data[0].id
								that.loading = false
							}else{
								that.loading = false
							}

    	        		}else{
    	        			that.$message.error(response.data.msg.info);
    	        		}
                	})
            },
            //翻页
            fanye:function(page){
                this.loading = true
                this.getlist()
            }
        },
    }
</script>

<style lang="scss" scoped>
    .order_catchpdd{
        .says48{ line-height: 25px; padding: 20px 0;}
        .team{ background: #EAEAEA;

            .powertop{ display: flex; width: 640px;}
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EAEAEA solid; color: #727272;  font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .centerall{ padding: 20px; background: #FFFFFF; color: #666;
                .t-img{ margin-bottom: 20px; position: relative;
                    img{ width: 100%;}
                    .t-email{ position: absolute; background: #FFFFFF; color: #DD2727; font-size: 14px; right: 20px; padding: 5px 10px; top: 26px; cursor: pointer;}
                    .t-48{ position: absolute; background: #FFFFFF; color: #DD2727; font-size: 14px; right: 160px; padding: 5px 10px; top: 26px; cursor: pointer;}
                }
                .t-con{
                    .list{
                    	display: flex; text-align: center; color: #727272; line-height: 45px; border-top: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid; margin-top: -1px;
                    	.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid; }
                    	.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
                        .td2{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
                        .el-button--danger{padding: 7px 15px!important;}
                    }
                    .el-pagination{ text-align: right; margin: 20px 0}
                    .addshop{ text-align: center; padding: 20px 0;}
                }
                .getcookie{ background: #F8F8F8; padding: 20px; line-height: 30px; margin-top: 40px; border: 1px #e6e6e6 solid;
                  .getflex{ display: flex; justify-content: space-between; width: 750px; margin: 0 auto; margin-top: 50px;
                      .getxian{ height: 25px; border-bottom: 1px #D5D5D5 solid; flex-basis: 280px;}
                      .getflexli{  flex-basis: 50px; text-align: center; z-index: 2;
                        .getflexlix{background: #D5D5D5;  line-height: 50px; border-radius: 25px; width: 50px; }
                      }
                  }
                  .getflex2{ display: flex; justify-content: space-between; width: 950px; margin: 20px auto;
                    .getflexli2{ width: 240px;text-align: center;
                        .getflexli2title{ font-size: 16px;}
                        .getflexli2content{ font-size: 14px;}
                    }
                  }
                  .blue a{ color:#409EFF; cursor:pointer}
                }
            }
        }
        .cookiechange{margin-left: 5px;cursor: pointer;}

    }
</style>
